<template>

    <div style="background-color: white;padding: 40px;border: 1px solid #ddd;">
        <div class="f1">
            <img :src="data.img" alt="" style="width: 206px;height: 206px;border-radius: 50%;">
            <div class="right">
                <div>{{ data.name }}</div>
                <div>歌手：{{ data.gname }} <span style="margin-left: 40px;">点赞量：{{ data.dianzan }}</span>
                <span style="margin-left: 40px;">播放量：{{ data.num }}</span>
                </div>
                <div >所属分类：<span style="margin-right: 20px;">{{ data.cname }}</span>
            <svg  @click="shoucang(1)" v-if="data.isdianzan" t="1739177843152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8960" width="40" height="40"><path d="M411.904 153.728c19.797333-63.232 54.186667-90.24 122.026667-70.656l1.706666 0.554667c19.84 6.101333 42.666667 17.706667 64.085334 37.162666 33.706667 30.72 53.76 73.301333 53.76 126.805334 0 47.786667-2.773333 77.312-10.88 110.805333l-0.256 0.938667h175.488c107.264 0 149.888 72.362667 122.922666 192.682666l-2.304 9.856-5.461333 18.005334-20.608 67.114666-9.642667 30.677334-9.173333 28.672-17.066667 51.626666-11.648 33.621334-7.210666 20.053333-9.984 26.368-6.101334 15.232c-29.525333 71.253333-90.453333 103.978667-170.112 94.592l-387.114666-28.8a587.690667 587.690667 0 0 0-7.381334-0.341333l-15.36-0.341334H218.026667l-12.501334-0.213333-9.984-0.426667-8.32-0.768-3.712-0.554666-7.125333-1.408-11.52-3.029334c-59.349333-17.621333-90.24-67.925333-90.24-139.605333v-283.52c0-90.538667 54.954667-142.208 148.565333-142.208l75.776-0.042667 5.205334-3.968a293.632 293.632 0 0 0 72.234666-88.32l6.101334-11.946666c6.101333-12.544 11.093333-25.685333 15.829333-41.002667l0.768-2.602667z m88.661333 8.064c-1.834667-0.426667-2.645333 0.170667-3.541333 2.773333l-3.882667 14.933334-10.666666 38.442666-2.56 8.533334a366.933333 366.933333 0 0 1-20.565334 53.162666 387.754667 387.754667 0 0 1-72.618666 102.442667 333.141333 333.141333 0 0 1-49.28 42.026667l5.504-3.925334v417.408l336.682666 25.344c41.898667 4.906667 65.621333-6.101333 80.213334-36.096l2.858666-6.229333 5.76-14.378667 9.514667-25.173333 6.912-19.285333 11.221333-32.469334 8.064-24.064 17.365334-53.76 19.2-61.354666 15.445333-50.858667c18.986667-76.074667 7.808-94.592-38.357333-94.592h-217.685334a53.632 53.632 0 0 1-50.730666-71.125333l2.176-6.4 3.328-10.922667c10.282667-35.754667 13.226667-59.136 13.226666-108.629333 0-48.426667-26.88-72.96-57.045333-82.261334l-3.712-1.152z m-242.944 270.122667h-34.389333c-47.616 0-63.232 14.72-63.232 56.917333v283.52c0 38.016 9.941333 53.333333 33.792 59.008l1.493333 0.341333 3.754667 0.554667 5.12 0.426667 11.562667 0.256h28.586666l13.312 0.085333v-401.066667z" fill="#1296db" p-id="8961"></path></svg>
             <svg  @click="shoucang(1)" v-else  t="1739177130341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6836" width="40" height="40"><path d="M411.904 153.728c19.797333-63.232 54.186667-90.24 122.026667-70.656l1.706666 0.554667c19.84 6.101333 42.666667 17.706667 64.085334 37.162666 33.706667 30.72 53.76 73.301333 53.76 126.805334 0 47.786667-2.773333 77.312-10.88 110.805333l-0.256 0.938667h175.488c107.264 0 149.888 72.362667 122.922666 192.682666l-2.304 9.856-5.461333 18.005334-20.608 67.114666-9.642667 30.677334-9.173333 28.672-17.066667 51.626666-11.648 33.621334-7.210666 20.053333-9.984 26.368-6.101334 15.232c-29.525333 71.253333-90.453333 103.978667-170.112 94.592l-387.114666-28.8a587.690667 587.690667 0 0 0-7.381334-0.341333l-15.36-0.341334H218.026667l-12.501334-0.213333-9.984-0.426667-8.32-0.768-3.712-0.554666-7.125333-1.408-11.52-3.029334c-59.349333-17.621333-90.24-67.925333-90.24-139.605333v-283.52c0-90.538667 54.954667-142.208 148.565333-142.208l75.776-0.042667 5.205334-3.968a293.632 293.632 0 0 0 72.234666-88.32l6.101334-11.946666c6.101333-12.544 11.093333-25.685333 15.829333-41.002667l0.768-2.602667z m88.661333 8.064c-1.834667-0.426667-2.645333 0.170667-3.541333 2.773333l-3.882667 14.933334-10.666666 38.442666-2.56 8.533334a366.933333 366.933333 0 0 1-20.565334 53.162666 387.754667 387.754667 0 0 1-72.618666 102.442667 333.141333 333.141333 0 0 1-49.28 42.026667l5.504-3.925334v417.408l336.682666 25.344c41.898667 4.906667 65.621333-6.101333 80.213334-36.096l2.858666-6.229333 5.76-14.378667 9.514667-25.173333 6.912-19.285333 11.221333-32.469334 8.064-24.064 17.365334-53.76 19.2-61.354666 15.445333-50.858667c18.986667-76.074667 7.808-94.592-38.357333-94.592h-217.685334a53.632 53.632 0 0 1-50.730666-71.125333l2.176-6.4 3.328-10.922667c10.282667-35.754667 13.226667-59.136 13.226666-108.629333 0-48.426667-26.88-72.96-57.045333-82.261334l-3.712-1.152z m-242.944 270.122667h-34.389333c-47.616 0-63.232 14.72-63.232 56.917333v283.52c0 38.016 9.941333 53.333333 33.792 59.008l1.493333 0.341333 3.754667 0.554667 5.12 0.426667 11.562667 0.256h28.586666l13.312 0.085333v-401.066667z" fill="#000000" p-id="6837"></path></svg>
             <svg  @click="shoucang(2)" v-if="!data.isshoucang" t="1739177426502" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7817" width="40" height="40"><path d="M253.488042 1024c-16.9 0-33.2875-5.1125-47.6125-15.3625-26.625-18.425-39.425-49.6625-34.3125-81.925l40.9625-251.9c1.5375-10.2375-1.5375-20.475-8.7-27.65L28.213042 466.4375c-22.0125-22.525-29.1875-55.3-19.45-84.9875 9.725-29.7 35.325-51.2 66.05-55.8125l237.575-36.35c10.75-1.5375 19.4625-8.1875 24.0625-17.925L441.388042 48.125c13.825-29.7 42.5-48.125 75.2625-48.125s61.4375 18.4375 75.2625 48.125l104.45 223.2375c4.6125 9.725 13.825 16.375 24.0625 17.925L958.000542 325.625a82.355 82.355 0 0 1 66.05 55.8125c10.2375 29.7 2.5625 62.4625-19.45 84.9875l-175.625 180.7375c-7.1625 7.175-10.2375 17.925-8.7 27.65l40.9625 251.9c5.125 31.75-8.1875 63.4875-34.3 81.925-26.1125 18.4375-59.9 20.4875-88.0625 4.6125l-206.85-114.6875c-9.725-5.1125-20.9875-5.1125-30.7125 0l-207.3625 115.2c-12.8125 6.65-26.6375 10.2375-40.4625 10.2375zM516.650542 51.2c-12.8 0-23.55 7.1625-29.1875 18.4375L383.525542 292.875c-11.775 25.0875-35.325 43.0125-62.975 47.1l-237.575 36.35c-12.2875 2.05-21.5 9.7375-25.6 21.5-4.1 11.775-1.025 24.0625 7.675 32.775L240.688042 611.325c18.4375 18.95 26.625 45.5625 22.525 71.675L222.250542 934.9125c-2.05 12.8 3.075 24.575 13.3125 31.7375 10.2375 7.175 23.0375 7.6875 33.7875 1.5375l207.3625-115.2c25.0875-13.825 55.3-13.825 80.3875 0l207.3625 115.2c10.75 6.1375 23.55 5.625 33.8-1.5375 10.2375-7.1625 15.3625-18.95 13.3125-31.7375L770.625542 683.0125c-4.1-26.1125 4.1-52.7375 22.525-71.675l175.625-180.7375c8.7-8.7 11.2625-20.9875 7.675-32.775-4.0875-11.775-13.3125-19.9625-25.6-21.5l-237.5625-36.35c-27.65-4.0875-51.2-22.0125-62.975-47.1L545.838042 69.6375c-5.625-11.2625-16.375-18.4375-29.1875-18.4375z m0 0" p-id="7818"></path></svg>
             <svg @click="shoucang(2)"  v-else  t="1739177490542" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7960" width="40" height="40"><path d="M198.584302 933.644588 249.81783 970.867924 305.311479 647.315032C307.276076 635.860567 303.478502 624.172835 295.156348 616.060737L60.081417 386.919307 40.511947 447.14793 365.377518 399.942199C376.878451 398.271015 386.820643 391.047599 391.964019 380.625982L537.248309 86.247837 473.920194 86.247837 619.204484 380.625982C624.34786 391.047599 634.290052 398.271015 645.790985 399.942199L970.656556 447.14793 951.087086 386.919307 716.012156 616.060737C707.690002 624.172835 703.892427 635.860567 705.857024 647.315032L761.350674 970.867924 812.584201 933.644588 522.015603 780.883636C511.728852 775.475569 499.439651 775.475569 489.1529 780.883636L198.584302 933.644588ZM489.1529 843.392226 779.721498 996.15318C805.626138 1009.772053 835.902358 987.77508 830.955026 958.929844L775.461358 635.376954 765.306227 666.631249 1000.381158 437.489821C1021.338447 417.061512 1009.773956 381.469662 980.811688 377.261199L655.946116 330.055468 682.532617 349.371687 537.248309 54.993542C524.295998 28.749279 486.872505 28.749279 473.920194 54.993542L328.635886 349.371687 355.222387 330.055468 30.356815 377.261199C1.394547 381.469662-10.169944 417.061512 10.787346 437.489821L245.862276 666.631249 235.707145 635.376954 180.213478 958.929844C175.266145 987.77508 205.542365 1009.772053 231.447005 996.15318L522.015603 843.392226 489.1529 843.392226Z" fill="#389BFF" p-id="7961"></path></svg>
                </div>
                <div class="buttons" style="margin-bottom: 40px;" @click="playG">
                    <i v-if="$store.state.yyCur==data.id&&$store.state.playStatus"    class="el-icon-video-pause" style="font-size:18px"></i>
                    <i class="el-icon-video-play" v-else style="font-size:18px"></i>
                {{$store.state.yyCur==data.id&&$store.state.playStatus?'播放中':'播放'}}  </div>
                  <div class="buttons" style="margin-bottom: 40px;margin-left:20px" @click="jiaruGd">
                 加入歌单 </div>
                <div class="geci" v-for="v in data.geciList" :key="v.id">
            {{ v.title }}
        </div>
            </div>
        </div>

    

      <div style=' border-radius:20px;margin-top:20px'>
          <h1 style="border-bottom:2px solid rgb(199, 12, 12);padding-bottom:10px">评论</h1>
      <div style="display:flex;margin-top:20px;padding:0 20px">
        <img style="width:45px;height:45px;margin-right:20px" src="https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50" alt="">
        <el-input  type="textarea" v-model='content'  placeholder="请输入评论" ></el-input>
       
      </div>
      <div style="display:flex; justify-content: flex-end;width:100%;padding-right:40px">
         <el-button style="margin-right:20px;background-color: rgb(199, 12, 12);border:none;margin-top:10px"  type="primary" @click='send'>发送</el-button>
      </div>
        <div class='list'>
            <div class='item' v-for='v in pinglunList' :key='v.id'>
                <div>
                <div>
                    <img style="width: 40px;height: 40px;border-radius: 50%;" :src="v.startAvatar" alt="">
                    
                    {{v.startName}}
            <span v-if='v.startId==$store.state.user.id'  style='color:#36d'>(我)</span>
                </div>
                <div style="padding:8px 0">{{v.content}}</div>
                <div class='date'>{{v.createTime}}
                <span style='cursor: pointer;' @click='huifu(v)'>回复</span>
                </div>
                </div>
             <div style="display:flex;margin-top:20px" v-show='v.show'>
        <el-input v-model='v.value' :placeholder="yiPla"   >
          <el-button slot="append" icon="el-icon-close" @click='v.show=false'></el-button>
        </el-input>
        <el-button type="primary" @click='send(v)'>发送</el-button>
      </div>
                <div style='padding-left:20px;padding-top:20px'>
                <div v-for='vv in v.children' :key='vv.id' style='margin-bottom:20px'>
                  <div v-if='vv.endId==v.startId'>
                    <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.startAvatar" alt="">
                    {{vv.startName}}       <span v-if='vv.startId==$store.state.user.id'  style='color:#36d'>(我)</span>
                   <span>:{{vv.content}}</span>
                   </div>
                   <div v-else>
                        <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.startAvatar" alt="">
                    {{vv.startName}}    <span v-if='vv.startId==$store.state.user.id' style='color:#36d'>(我)</span>  回复 
                    <img style="width: 40px;height: 40px;border-radius: 50%;" :src="vv.endAvatar" alt="">
                    <span style="color:#36d">{{vv.endName}}
                        <span v-if='vv.endId==$store.state.user.id' style='color:#36d'>(我)</span>
                   </span>:
                   <span>{{vv.content}}</span>
                   </div>
                    
                <div class='date'>{{vv.createTime}}
                <span style='cursor: pointer;' @click='huifuu(vv)' v-if='vv.startId!=$store.state.user.id'>回复</span>
                </div>
                 <div style="display:flex;margin-top:20px" v-show='vv.show'>
        <el-input v-model='vv.value' :placeholder="erPla"  >
          <el-button slot="append" icon="el-icon-close" @click='vv.show=false'></el-button>
        </el-input>
        <el-button type="primary" @click='send2(v,vv)'>发送</el-button>
      </div>
                </div>
                </div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
    import api from "@/api/index"
    export default {
        data() {
            return {
                url: '',
                data: {},
                pinglunList: [],
                content: '',
                yiPla: '',
                erPla: ''
            }
        },
        mounted() {
            this.getData();
            this.getList();
        },
            watch: {
          '$route.query.id'(v){
             this.getData();
            this.getList();
          }  
        },
        methods: {
            jiaruGd(){
                this.$root.$emit('jiaruGd',this.data.id)
            },
            playG(){
                if(this.$store.state.yyCur!=this.data.id){
                    this.data.num+=1
                }
                this.$root.$emit('playG',this.data)
            },
            kaoshi(){
                if(!this.$store.state.user.id){
                    return this.$message({
          message: '请先登录',
          type: 'warning'
        });
                }
                window.open('/order?vid='+this.$route.query.id, '_blank');
            },

            shoucang(type){
                if(!this.$store.state.user.id){
                    return this.$message({
          message: '请先登录',
          type: 'warning'
        });
                }
                //发请求
                api.shoucang({
                    uid:this.$store.state.user.id,
                    vid:this.$route.query.id,
                    type
                }).then(res=>{
                    if(type==1){

                        this.data.isdianzan=!this.data.isdianzan
                        if(this.data.isdianzan){
                            this.data.dianzan+=1
                        }else{
                            this.data.dianzan-=1
                        }
                    }else{

                        this.data.isshoucang=!this.data.isshoucang
                    }
                })
            },
            huifuu(vv) {
                 if(!this.$store.state.user.id){
                    return this.$message({
          message: '请先登录',
          type: 'warning'
        });
                }
                this.pinglunList.forEach(item => {
                    item.children.forEach(itemm => {

                        this.$set(itemm, 'show', false)
                    })
                    console.log(item)
                })
                this.$set(vv, 'show', true)
                this.erPla = "回复" + vv.startName
            },
            huifu(v) {
                 if(!this.$store.state.user.id){
                    return this.$message({
          message: '请先登录',
          type: 'warning'
        });
                }
                this.pinglunList.forEach(item => {
                    this.$set(item, 'show', false)
                    console.log(item)
                })
                this.$nextTick(() => {
                    this.$set(v, 'show', true)
                })
                this.yiPla = "回复" + v.startName
            },
            send2(v, vv) {
                 if(!this.$store.state.user.id){
                    return this.$message({
          message: '请先登录',
          type: 'warning'
        });
                }
                let data = {
                    startId: this.$store.state.user.id,
                    startName: this.$store.state.user.name,
                    pid: v.id,
                    content: vv.value,
                    vid: this.$route.query.id,
                    endId: vv.startId,
                    endName: vv.startName
                }
                api.addPinglun(data).then(res => {
                    if (res.code == 200) {
                        v.children.push(res.data)
                        vv.value = ''
                        vv.show = false
                        this.$message({
                            message: '评论成功',
                            type: 'success'
                        });
                    }
                })
            },
            send(v) {
                 if(!this.$store.state.user.id){
                    return this.$message({
          message: '请先登录',
          type: 'warning'
        });
                }
                let data = {
                    startId: this.$store.state.user.id,
                    startName: this.$store.state.user.name,
                    pid: v.id || 0,
                    content: v.value || this.content,
                    vid: this.$route.query.id,
                    endId: v.startId,
                    endName: v.startName
                }
                console.log(data)
                api.addPinglun(data).then(res => {
                    if (res.code == 200) {
                        if (v.id) {
                            v.children.push(res.data)
                            v.show = false
                            v.value = ''
                        } else {
                            this.pinglunList.push(res.data)

                            this.content = ''
                        }
                        this.$message({
                            message: '评论成功',
                            type: 'success'
                        });
                    }
                })
            },
            getList() {
                api.pinglunlist({
                    vid: this.$route.query.id
                }).then(res => {
                    this.pinglunList = res.data
                    console.log(res)
                })
            },
            submit() {
                api.addCart({
                    vid: this.$route.query.id,
                    userId: this.$store.state.user.id
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '加入成功',
                            type: 'success'
                        });
                    }
                })
            },
            mousemove(v) {
                this.url = v
            },
            getData() {
                api.getDetail({vid:this.$route.query.id,uid:this.$store.state.user.id}).then(res => {
                    this.data = res.data
                    console.log(111, res);
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
.buttons{
    margin-top: 10px;
    font-size: 18px;
    background-color: rgb(199, 12, 12);
    border-radius: 10px;
    color: white;
    cursor: pointer;
    display: inline-block;
    padding:0 10px ;
    height: 30px;
    line-height: 30px;
}
.f1{
    display: flex;
    .right{
        margin-left: 40px;
        >div:nth-child(1){
            color: #333;
            font-size: 32px;
        }
        >div:nth-child(2),>div:nth-child(3){  font-size: 18px;
            display: flex;
            align-items: center;
            margin-top: 16px;
            color: #999;
        }
        .geci{
            font-size: 20px;
            margin-top: 10px;
        }
    }

}
.dingwei2{
    position: fixed;
    right: 80px;
    top: 200px;
    >*{
        cursor: pointer;
    }
}
.dingwei{
    position: fixed;
    left: 80px;
    top: 200px;
    >div{
        display: flex;
        font-size: 26px;
        margin-top: 60px;
        cursor: pointer;
        align-items: flex-end;
    }
}
    .list {
        margin-top: 20px;
        padding: 20px;
        font-size: 20px;
        .item {
            margin-bottom: 26px;
            border-bottom: 1px solid #ddd;
        }
    }
    
    .cur {
        border: 1px solid blue;
    }
    
    .date {
        color: #666;
        font-size: 16px
    }
    

    
    .shanchu {
        text-decoration: line-through;
    }
</style>